import './home.scss'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/parallax'
import { Input, Form, Select, DatePicker, Button } from 'antd'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay, Pagination } from 'swiper/modules'
import { useState, useEffect, useRef } from 'react'
import SvgIcon from '@/components/SvgIcon'
import { useNavigate } from 'react-router-dom'

function Home() {
  // 使用 useNavigate 钩子进行路由跳转
  const navigate = useNavigate()
  const [position, setPosition] = useState({ x: 0, y: 0 })
  const [unfold, setUnfold] = useState([true, false, false])
  const [showPone, setShowPone] = useState(false)
  const [showPonetwo, setShowPonetwo] = useState(false)
  const [showPtwo, setShowPtWo] = useState(false)
  const [showPthree, setShowPthree] = useState(false)
  const [showPfour, setShowPfour] = useState(false)
  const [showPfive, setShowPfive] = useState(false)
  const [count, setCount] = useState([540, 48, 2310, 32])
  const btnRef = useRef<HTMLButtonElement>(null)
  const pone1 = useRef<HTMLDivElement>(null)
  const pone2 = useRef<HTMLDivElement>(null)
  const pone3 = useRef<HTMLDivElement>(null)
  const ponetwo = useRef<HTMLDivElement>(null)
  const ptwo1 = useRef<HTMLDivElement>(null)
  const ptwo2 = useRef<HTMLDivElement>(null)
  const ptwo3 = useRef<HTMLDivElement>(null)
  const ptwo4 = useRef<HTMLDivElement>(null)
  const ptwo5 = useRef<HTMLDivElement>(null)
  const ptwo6 = useRef<HTMLDivElement>(null)
  const pthree1 = useRef<HTMLDivElement>(null)
  const pthree2 = useRef<HTMLDivElement>(null)
  const pfour1 = useRef<HTMLDivElement>(null)
  const pfour2 = useRef<HTMLDivElement>(null)
  const pfive1 = useRef<HTMLDivElement>(null)
  const pfive2 = useRef<HTMLDivElement>(null)
  const pfive3 = useRef<HTMLDivElement>(null)

  // 按钮特效颜色跟随鼠标
  const handleMouseMove = (e: React.MouseEvent<HTMLButtonElement>) => {
    if (btnRef.current) {
      const x = e.pageX - btnRef.current.offsetLeft
      const y = e.pageY - btnRef.current.offsetTop
      setPosition({ x, y })
    }
  }

  // // 颜色全部清空
  // const cleanColor = () => {
  //   setColor([false, false, false, false, false, false])
  // }

  // // 鼠标进入元素修改背景颜色
  // const handleMouseEnter = (e: any) => {
  //   cleanColor()
  //   const data = Object.keys(e.target.dataset)[0]
  //   switch (data) {
  //     case 'pt1':
  //       setColor([true, false, false, false, false, false])
  //       break
  //     case 'pt2':
  //       setColor([false, true, false, false, false, false])
  //       break
  //     case 'pt3':
  //       setColor([false, false, true, false, false, false])
  //       break
  //     case 'pt4':
  //       setColor([false, false, false, true, false, false])
  //       break
  //     case 'pt5':
  //       setColor([false, false, false, false, true, false])
  //       break
  //     case 'pt6':
  //       setColor([false, false, false, false, false, true])
  //       break
  //   }
  // }

  // // 鼠标离开元素修改背景颜色
  // const handleMouseLeave = () => {
  //   cleanColor()
  // }

  // 点击扩展按钮的回调
  const handleUnfold1 = () => {
    setUnfold([true, false, false])
  }
  const handleUnfold2 = () => {
    setUnfold([false, true, false])
  }
  const handleUnfold3 = () => {
    setUnfold([false, false, true])
  }

  // 监听鼠标位置
  useEffect(() => {
    const btn = btnRef.current
    if (btn) {
      btn.style.setProperty('--x', position.x + 'px')
      btn.style.setProperty('--y', position.y + 'px')
    }
  }, [position])

  // 日期选择触发的回调
  const handleDate = (data: any) => {
    console.log(data)
  }

  // 数字记载动画
  const incrementCount = async (num: number, order: number) => {
    let i = 0

    while (i <= num) {
      setCount((prevCount) => {
        const newArray = [...prevCount] // 创建原数组的副本
        newArray[order - 1] = i // 更新特定索引的值
        return newArray
      })

      // 根据 i 的值动态调整增量，使得越靠近 num 加的越慢
      if (num - i <= 100) {
        await new Promise((resolve) => setTimeout(resolve, 50))
        i += 1
      } else {
        await new Promise((resolve) => setTimeout(resolve, 25))
        i += 100
      }
    }
  }

  // 页面滚动触发的回调
  const handleScroll = async () => {
    if (pone1.current && pone2.current && pone3.current) {
      const rect = pone1.current.getBoundingClientRect()
      if (!showPone && rect.top >= 0 && rect.bottom <= window.innerHeight) {
        setShowPone(true)
      }
    }

    if (ponetwo.current) {
      const rect = ponetwo.current.getBoundingClientRect()
      if (!showPonetwo && rect.top >= 0 && rect.bottom <= window.innerHeight) {
        setShowPonetwo(true)
        incrementCount(count[0], 1)
        incrementCount(count[1], 2)
        incrementCount(count[2], 3)
        incrementCount(count[3], 4)
      }
    }

    if (
      ptwo1.current &&
      ptwo2.current &&
      ptwo3.current &&
      ptwo4.current &&
      ptwo5.current &&
      ptwo6.current
    ) {
      const rect = ptwo1.current.getBoundingClientRect()
      if (!showPtwo && rect.top >= 0 && rect.bottom <= window.innerHeight) {
        setShowPtWo(true)
      }
    }

    if (pthree1.current && pthree1.current) {
      const rect = pthree1.current.getBoundingClientRect()
      if (!showPthree && rect.top >= 0 && rect.bottom <= window.innerHeight) {
        setShowPthree(true)
      }
    }

    if (pfour1.current && pfour1.current) {
      const rect = pfour1.current.getBoundingClientRect()
      if (!showPfour && rect.top >= 0 && rect.bottom <= window.innerHeight) {
        setShowPfour(true)
      }
    }

    if (pfive1.current && pfive2.current && pfive3.current) {
      const rect = pfive1.current.getBoundingClientRect()
      if (!showPfive && rect.top >= 0 && rect.bottom <= window.innerHeight) {
        setShowPfive(true)
      }
    }
  }

  useEffect(() => {
    window.addEventListener('scroll', handleScroll)

    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [showPone, showPonetwo, showPtwo, showPthree, showPfour, showPfive])
  return (
    <div className="Home">
      <div className="part-one">
        <div className="part-one-top">
          <div className="part-one-top-top">您值得信赖的智能测评系统</div>
          <div className="part-one-top-bottom">
            君子食无求饱，居无求安，敏于事而慎于言，就有道而正焉，可谓好学也已
          </div>
        </div>
        <div className="part-one-center">
          <div
            style={{ opacity: '0' }}
            ref={pone1}
            className={`${showPone ? 'animated slideDownRetourn' : ''}`}
          >
            <div className="part-one-center-top">
              <img src="/assets/images/evaluation.jpg" alt="" />
            </div>
            <div className="part-one-center-center">
              <div>测评系统</div>
              <div>实现精准教育评估</div>
            </div>
            <div className="part-one-center-bottom">
              我们的评测系统为学生提供了一个全面的评估平台，包括自动化的考试评分、即时性能反馈和个性化的学习建议，确保学生在学习过程中的每个阶段都能得到及时的指导和评估。
            </div>
          </div>
          <div
            style={{ opacity: '0', animationDuration: '1.5s' }}
            ref={pone2}
            className={`${showPone ? 'animated slideDownRetourn' : ''}`}
          >
            <div className="part-one-center-top">
              <img src="/assets/images/cooperation.jpg" alt="" />
            </div>
            <div className="part-one-center-center">
              <div>携手共进</div>
              <div>学生评估合作伙伴计划</div>
            </div>
            <div className="part-one-center-bottom">
              我们致力于与教育机构携手合作，提供一套全面的学生评测解决方案。通过集成自动化评估、实时反馈和个性化学习建议，我们的系统确保学生在学习旅程的每一步都能获得及时指导和支持。合作让我们能够共同为学生提供更优质的教育评估服务。
            </div>
          </div>
          <div
            style={{ opacity: '0', animationDuration: '2s' }}
            ref={pone3}
            className={`transitionDelay: '0.5s' ${showPone ? 'animated slideDownRetourn' : ''}`}
          >
            <div className="part-one-center-top">
              <img src="/assets/images/forecast.jpg" alt="" />
            </div>
            <div className="part-one-center-center">
              <div>能力提升</div>
              <div>智能评测与实时指导</div>
            </div>
            <div className="part-one-center-bottom">
              我们的系统专注于学生能力的提升，提供全面的评测解决方案。通过自动化评估、实时反馈和个性化学习建议，确保学生在学习过程中的每一步都得到及时指导。系统的智能提示功能助力学生识别和克服学习难点，从而有效提升综合能力。
            </div>
          </div>
        </div>
        <div className="part-one-bottom">
          <button
            onClick={() => navigate('/main')}
            ref={btnRef}
            onMouseMove={handleMouseMove}
            className="btn"
          >
            <span>立即体验</span>
          </button>
        </div>
      </div>
      <div className="part-one-two-between">
        <div className="part-one-two-between-left"></div>
        <div className="part-one-two-between-right"></div>
        <div ref={ponetwo} className="part-one-two-between-center">
          <div>
            <SvgIcon name="trophy" size="80" color="#fff" />
            <div className="test-main">
              <div>{count[0]}</div>
              <div>获奖</div>
            </div>
          </div>
          <div>
            <SvgIcon name="area" size="80" color="#fff" />
            <div className="test-main">
              <div>{count[1]}</div>
              <div>地区</div>
            </div>
          </div>
          <div>
            <SvgIcon name="project" size="80" color="#fff" />
            <div className="test-main">
              <div>{count[2]}</div>
              <div>产品</div>
            </div>
          </div>
          <div>
            <SvgIcon name="people" size="80" color="#fff" />
            <div className="test-main">
              <div>{count[3]}k</div>
              <div>用户</div>
            </div>
          </div>
        </div>
      </div>
      <div className="part-two">
        <div className="pt-top">
          <div className="ptt-top">我们的服务</div>
          <div className="ptt-bottom">
            我们提供智能测评系统，<span style={{ color: 'red' }}>自动评估学生的学习成果</span>
            ，提供即时反馈，帮助教师和学生更好地理解学习进度和存在的问题。
          </div>
        </div>
        <div className="pt-bottom">
          <div
            ref={ptwo1}
            style={{ opacity: '0' }}
            className={`${showPtwo ? 'animated2 slideDownRetourn2-1' : ''}`}
          >
            <div className="ptb-left">
              <SvgIcon name="evaluate" size="50" />
            </div>
            <div className="ptb-right">
              <div className="ptbr-top">自动化评估</div>
              <div className="ptbr-bottom">
                我们的系统可以自动评估学生的学习成果，减少教师的工作负担，提高评估效率。
              </div>
            </div>
          </div>
          <div
            ref={ptwo2}
            style={{ opacity: '0' }}
            className={`${showPtwo ? 'animated2 slideDownRetourn2-2' : ''}`}
          >
            <div className="ptb-left">
              <SvgIcon name="feedback" size="50" />
            </div>
            <div className="ptb-right">
              <div className="ptbr-top">实时反馈</div>
              <div className="ptbr-bottom">
                系统能够即时提供学习反馈，帮助学生及时了解自己的学习进度和不足之处。
              </div>
            </div>
          </div>
          <div
            ref={ptwo3}
            style={{ opacity: '0' }}
            className={`${showPtwo ? 'animated2 slideDownRetourn2-3' : ''}`}
          >
            <div className="ptb-left">
              <SvgIcon name="individuation" size="50" />
            </div>
            <div className="ptb-right">
              <div className="ptbr-top">个性化建议</div>
              <div className="ptbr-bottom">
                根据学生的评估结果，系统提供个性化的学习建议，帮助学生更有效地学习。
              </div>
            </div>
          </div>
          <div
            ref={ptwo4}
            style={{ opacity: '0' }}
            className={`${showPtwo ? 'animated2 slideDownRetourn2-4' : ''}`}
          >
            <div className="ptb-left">
              <SvgIcon name="analyse" size="50" />
            </div>
            <div className="ptb-right">
              <div className="ptbr-top">数据分析</div>
              <div className="ptbr-bottom">
                提供详细的学习数据分析报告，帮助教师和学生全面了解学习情况，制定针对性的教学和学习计划。
              </div>
            </div>
          </div>
          <div
            ref={ptwo5}
            style={{ opacity: '0' }}
            className={`${showPtwo ? 'animated2 slideDownRetourn2-5' : ''}`}
          >
            <div className="ptb-left">
              <SvgIcon name="book" size="50" />
            </div>
            <div className="ptb-right">
              <div className="ptbr-top">学习资源</div>
              <div className="ptbr-bottom">
                根据评估结果推荐相应的学习资源，帮助学生更好地提高学习效果。
              </div>
            </div>
          </div>
          <div
            ref={ptwo6}
            style={{ opacity: '0' }}
            className={`${showPtwo ? 'animated2 slideDownRetourn2-6' : ''}`}
          >
            <div className="ptb-left">
              <SvgIcon name="calendar" size="50" />
            </div>
            <div className="ptb-right">
              <div className="ptbr-top">学习计划制定</div>
              <div className="ptbr-bottom">
                我们的学习计划制定服务帮助学生制定个性化学习计划，确保学生在学习过程中有明确的目标和方向。
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="part-three">
        <div
          ref={pthree1}
          style={{ opacity: '0' }}
          className={`pthree-left ${showPthree ? 'animated3 lightSpeedInLeft' : ''}`}
        >
          <div className="ptreel-top">为什么选择我们</div>
          <div className="ptreel-center">
            我们致力于提供卓越服务，长期为客户业务发展提供专业支持。
          </div>
          <div className="ptreel-bottom">
            我们的系统能够自动评估学生的学习成果，提供即时反馈，帮助教师和学生更好地理解学习进度和存在的问题。我们始终坚持以客户为中心，不断创新和优化我们的服务，以满足客户的需求。我们的专业团队和丰富的行业经验，使我们成为您值得信赖的智能测评系统合作伙伴。
          </div>
          <div onClick={() => navigate('/main')} className="btn-conteiner">
            <div className="btn-content">
              <span style={{ fontFamily: 'STKaiti' }} className="btn-title">
                立即体验
              </span>
              <span className="icon-arrow">
                <svg
                  width="66px"
                  height="43px"
                  viewBox="0 0 66 43"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlnsXlink="http://www.w3.org/1999/xlink"
                >
                  <g id="arrow" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                    <path
                      id="arrow-icon-one"
                      d="M40.1543933,3.89485454 L43.9763149,0.139296592 C44.1708311,-0.0518420739 44.4826329,-0.0518571125 44.6771675,0.139262789 L65.6916134,20.7848311 C66.0855801,21.1718824 66.0911863,21.8050225 65.704135,22.1989893 C65.7000188,22.2031791 65.6958657,22.2073326 65.6916762,22.2114492 L44.677098,42.8607841 C44.4825957,43.0519059 44.1708242,43.0519358 43.9762853,42.8608513 L40.1545186,39.1069479 C39.9575152,38.9134427 39.9546793,38.5968729 40.1481845,38.3998695 C40.1502893,38.3977268 40.1524132,38.395603 40.1545562,38.3934985 L56.9937789,21.8567812 C57.1908028,21.6632968 57.193672,21.3467273 57.0001876,21.1497035 C56.9980647,21.1475418 56.9959223,21.1453995 56.9937605,21.1432767 L40.1545208,4.60825197 C39.9574869,4.41477773 39.9546013,4.09820839 40.1480756,3.90117456 C40.1501626,3.89904911 40.1522686,3.89694235 40.1543933,3.89485454 Z"
                      fill="#FFFFFF"
                    ></path>
                    <path
                      id="arrow-icon-two"
                      d="M20.1543933,3.89485454 L23.9763149,0.139296592 C24.1708311,-0.0518420739 24.4826329,-0.0518571125 24.6771675,0.139262789 L45.6916134,20.7848311 C46.0855801,21.1718824 46.0911863,21.8050225 45.704135,22.1989893 C45.7000188,22.2031791 45.6958657,22.2073326 45.6916762,22.2114492 L24.677098,42.8607841 C24.4825957,43.0519059 24.1708242,43.0519358 23.9762853,42.8608513 L20.1545186,39.1069479 C19.9575152,38.9134427 19.9546793,38.5968729 20.1481845,38.3998695 C20.1502893,38.3977268 20.1524132,38.395603 20.1545562,38.3934985 L36.9937789,21.8567812 C37.1908028,21.6632968 37.193672,21.3467273 37.0001876,21.1497035 C36.9980647,21.1475418 36.9959223,21.1453995 36.9937605,21.1432767 L20.1545208,4.60825197 C19.9574869,4.41477773 19.9546013,4.09820839 20.1480756,3.90117456 C20.1501626,3.89904911 20.1522686,3.89694235 20.1543933,3.89485454 Z"
                      fill="#FFFFFF"
                    ></path>
                    <path
                      id="arrow-icon-three"
                      d="M0.154393339,3.89485454 L3.97631488,0.139296592 C4.17083111,-0.0518420739 4.48263286,-0.0518571125 4.67716753,0.139262789 L25.6916134,20.7848311 C26.0855801,21.1718824 26.0911863,21.8050225 25.704135,22.1989893 C25.7000188,22.2031791 25.6958657,22.2073326 25.6916762,22.2114492 L4.67709797,42.8607841 C4.48259567,43.0519059 4.17082418,43.0519358 3.97628526,42.8608513 L0.154518591,39.1069479 C-0.0424848215,38.9134427 -0.0453206733,38.5968729 0.148184538,38.3998695 C0.150289256,38.3977268 0.152413239,38.395603 0.154556228,38.3934985 L16.9937789,21.8567812 C17.1908028,21.6632968 17.193672,21.3467273 17.0001876,21.1497035 C16.9980647,21.1475418 16.9959223,21.1453995 16.9937605,21.1432767 L0.15452076,4.60825197 C-0.0425130651,4.41477773 -0.0453986756,4.09820839 0.148075568,3.90117456 C0.150162624,3.89904911 0.152268631,3.89694235 0.154393339,3.89485454 Z"
                      fill="#FFFFFF"
                    ></path>
                  </g>
                </svg>
              </span>
            </div>
          </div>
        </div>
        <div
          ref={pthree2}
          style={{ opacity: '0' }}
          className={`pthree-right ${showPthree ? 'animated3 lightSpeedInRight' : ''}`}
        >
          <div className="pthreerMain">
            <div onClick={handleUnfold1} className="pthreerOneTitle">
              <p>卓越服务，长期支持</p>
              {!unfold[0] ? <SvgIcon name="plus" size="30" /> : <SvgIcon name="minus" size="30" />}
            </div>
            {unfold[0] && (
              <div className="pthreerOneContent">
                <img src="/assets/images/support.jpg" alt="" />
                <p>
                  我们致力于提供卓越服务，长期为客户业务发展提供专业支持。我们深知每个业务的成功都需要稳定的后盾。
                </p>
              </div>
            )}
          </div>
          <div style={{ margin: '5px 0' }} className="pthreerMain">
            <div onClick={handleUnfold2} className="pthreerOneTitle">
              <p>智能测评，即时反馈</p>
              {!unfold[1] ? <SvgIcon name="plus" size="30" /> : <SvgIcon name="minus" size="30" />}
            </div>
            {unfold[1] && (
              <div className="pthreerOneContent">
                <img src="/assets/images/starts.jpg" alt="" />
                <p>
                  我们的智能测评系统能够自动评估学生的学习成果，提供即时反馈，帮助教师和学生全面了解学习进度。
                </p>
              </div>
            )}
          </div>
          <div className="pthreerMain">
            <div onClick={handleUnfold3} className="pthreerOneTitle">
              <p>创新优化，客户至上</p>
              {!unfold[2] ? <SvgIcon name="plus" size="30" /> : <SvgIcon name="minus" size="30" />}
            </div>
            {unfold[2] && (
              <div className="pthreerOneContent">
                <img src="/assets/images/shopping.jpg" alt="" />
                <p>
                  我们坚持以客户为中心，不断创新和优化我们的服务，以满足客户的需求。我们不断探索新技术，改进产品，力求为客户提供更优质的服务体验。
                </p>
              </div>
            )}
          </div>
        </div>
      </div>
      <div className={`part-four ${showPfour ? 'animated4 partFouranimation' : ''}`}>
        <div
          ref={pfour1}
          style={{ opacity: '0' }}
          className={`pf-left ${showPfour ? 'animated4 openUpLeftRetourn' : ''}`}
        >
          <Swiper
            className="mySwiper"
            speed={200}
            loop={true}
            pagination={{ clickable: true }}
            autoplay={{
              delay: 2500, // 自动播放的延迟时间，单位为毫秒
              disableOnInteraction: false, // 用户交互后不会停止自动播放
            }}
            modules={[Pagination, Autoplay]}
          >
            <SwiperSlide>
              <div className="pfSw-top">
                <SvgIcon name="start" size="50" />
                <span
                  style={{ fontFamily: 'STZhongsong', fontWeight: '600', letterSpacing: '1.5px' }}
                >
                  用户反馈
                </span>
              </div>
              <div className="pfSw-center">
                自从使用了贵公司的智能测评系统，我的教学变得更加高效了。系统自动评估学生的学习成果，并提供即时反馈，让我能够及时了解学生的学习进度和存在的问题。这让我能够更精准地指导学生，提高他们的学习效果。
              </div>
              <div className="pfSw-bottom">
                <img src="/assets/images/teacher.jpg" alt="" />
                <span>张老师</span>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="pfSw-top">
                <SvgIcon name="start" size="50" />
                <span style={{ fontFamily: 'STZhongsong', fontWeight: '600' }}>用户反馈</span>
              </div>
              <div className="pfSw-center">
                我使用贵公司的智能测评系统后，发现我的学习效果有了显著的提升。系统能够自动评估我的学习成果，并提供即时反馈，让我能够更好地理解自己的学习进度和存在的问题。这让我能够有针对性地改进，提高学习效率。
              </div>
              <div className="pfSw-bottom">
                <img src="/assets/images/student.jpg" alt="" />
                <span>李同学</span>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="pfSw-top">
                <SvgIcon name="start" size="50" />
                <span style={{ fontFamily: 'STZhongsong', fontWeight: '600' }}>用户反馈</span>
              </div>
              <div className="pfSw-center">
                我儿子的学校采用了贵公司的智能测评系统，我发现这个系统非常实用。系统能够自动评估学生的学习成果，并提供即时反馈，帮助家长更好地了解孩子的学习情况。这让我们能够及时关注孩子的学习进度和存在的问题。
              </div>
              <div className="pfSw-bottom">
                <img src="/assets/images/father.jpg" alt="" />
                <span>王家长</span>
              </div>
            </SwiperSlide>
            <div className="swiper-pagination"></div>
          </Swiper>
        </div>
        <div
          ref={pfour2}
          style={{ opacity: '0' }}
          className={`pf-right ${showPfour ? 'animated4 openDownRightRetourn' : ''}`}
        >
          <div className="pfr-form">
            <div className="pfrf-label">即刻感受</div>
            <Form size="large" style={{ display: 'flex', flexWrap: 'wrap' }}>
              <Form.Item style={{ width: 'calc(60% - 20px)', marginRight: '20px' }}>
                <Input style={{ width: '100%' }} placeholder="姓名" />
              </Form.Item>
              <Form.Item style={{ width: '40%' }}>
                <Select style={{ width: '100%' }} placeholder="性别">
                  <Select.Option value="man">男</Select.Option>
                  <Select.Option value="woman">女</Select.Option>
                </Select>
              </Form.Item>
              <Form.Item style={{ width: 'calc(60% - 20px)', marginRight: '20px' }}>
                <Input style={{ width: '100%' }} placeholder="邮箱" />
              </Form.Item>
              <Form.Item style={{ width: '40%' }}>
                <DatePicker
                  style={{ width: '100%' }}
                  placeholder="请选择生日"
                  onChange={handleDate}
                />
              </Form.Item>
              <Form.Item style={{ width: '100%' }}>
                <Input style={{ width: '100%' }} placeholder="电话" />
              </Form.Item>
            </Form>
            <Button size="large" type="primary" danger>
              表单提交
            </Button>
          </div>
        </div>
      </div>
      <div className="part-five">
        <div className="pfive-top">
          <div className="pfivet-top">近期新闻</div>
          <div className="pfivet-bottom">
            了解智能测评系统最新动态，把握行业趋势，优化教学策略，提高教育质量。
          </div>
        </div>
        <div className="pfive-bottom">
          <div className="pfiveb-part">
            <div className="pfivebp-left">
              <div
                ref={pfive1}
                style={{ opacity: '0' }}
                className={`${showPfive ? 'animated5 puffIn' : ''}`}
              >
                <p>27</p>
                <p>4月</p>
              </div>
            </div>
            <div className="pfivebp-right">
              <div className="pfivebpr-top">智能测评系统在教育市场的现实意义</div>
              <div className="pfivebpr-auth">
                作者：<span style={{ color: '#000' }}>黄强辉</span> / 875条评论
              </div>
              <div className="pfivebpr-main">
                随着科技的快速发展，智能测评系统逐渐成为教育市场的新宠。这种系统通过人工智能技术，能够自动评估学生的学习成果，并提供即时反馈，帮助教师和学生更好地理解学习进度和存在的问题。。。
              </div>
              <div className="pfivebpr-go">
                <span>查看更多</span>
                <SvgIcon name="arrow" />
              </div>
            </div>
          </div>
          <div className="pfiveb-part">
            <div className="pfivebp-left">
              <div
                ref={pfive2}
                style={{ opacity: '0', animationDuration: '1.5s' }}
                className={`${showPfive ? 'animated5 puffIn' : ''}`}
              >
                <p>25</p>
                <p>9月</p>
              </div>
            </div>
            <div className="pfivebp-right">
              <div className="pfivebpr-top">智能测评系统为客户提供的独特优势</div>
              <div className="pfivebpr-auth">
                作者：<span style={{ color: '#000' }}>孙言盈 </span> / 2345条评论
              </div>
              <div className="pfivebpr-main">
                随着教育技术的不断进步，智能测评系统已成为教育行业的一股新兴力量。这些系统不仅能够自动评估学生的学习成果，还能提供即时反馈，帮助教师和学生更全面地了解学习进度和存在的问题。。。
              </div>
              <div className="pfivebpr-go">
                <span>查看更多</span>
                <SvgIcon name="arrow" />
              </div>
            </div>
          </div>
          <div className="pfiveb-part">
            <div className="pfivebp-left">
              <div
                ref={pfive3}
                style={{ opacity: '0', animationDuration: '2s' }}
                className={`${showPfive ? 'animated5 puffIn' : ''}`}
              >
                <p>18</p>
                <p>3月</p>
              </div>
            </div>
            <div className="pfivebp-right">
              <div className="pfivebpr-top">智能测评系统的四大亮点</div>
              <div className="pfivebpr-auth">
                作者：<span style={{ color: '#000' }}>张志远</span> / 2945条评论
              </div>
              <div className="pfivebpr-main">
                在教育领域，智能测评系统凭借其独特的功能和优势，正逐渐成为提升教育质量和效率的关键工具。本文将详细介绍智能测评系统的四大亮点。。。
              </div>
              <div className="pfivebpr-go">
                <span>查看更多</span>
                <SvgIcon name="arrow" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Home
